<template>
  <div>
    <div class="productParam">
        <div class="product">红米note7</div>
        <div class="blackWhite"> 
            <span>概述</span>
            <span>|</span>
            <span>参数</span>
            <span>|</span>
            <span>用户评价</span>
        </div>
    </div>
    <div class="params">
        <div class="recommendPage">
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide><img src="../public/imgs/detail/phone-1.jpg" alt=""></swiper-slide>
                <swiper-slide><img src="../public/imgs/detail/phone-2.jpg" alt=""></swiper-slide>
                <swiper-slide><img src="../public/imgs/detail/phone-3.jpg" alt=""></swiper-slide>
                <swiper-slide><img src="../public/imgs/detail/phone-4.jpg" alt=""></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
        <div class="Can">
            <div class="name">红米note7</div>
            <div class="blackWhite">相机全新升级/960帧超慢动作/手持超级夜景〉全球首款双频GPS/骁龙845处理器/红</div>
            <div class="blackWhite">外人脸解锁/A变佳双摄/三星AMOLED屏</div>
            <div class="self-owned orange">小米自营</div>
            <div class="throughorange"><span class="orange">999元</span><span class="through blackWhite">1999元</span></div>
            <div class="address">
                <div class="blackWhite">北京北京市朝阳区安定门街道</div>
                <div class="orange">有现货</div>
            </div>
            <div class="name">选择版本</div>
            <div class="detailg">
                <div class="paramsdetail" :style="detailChoose==1?'border: 1px solid orangered;color: orange;':''" @click="detailChoose=1">6GB+64GB全网通</div>
                <div class="paramsdetail1" :style="detailChoose==2?'border: 1px solid orangered;color: orange;':''" @click="detailChoose=2">4GB+64GB移动4G</div>
            </div>
            <div class="name">选择颜色</div>
            <div class="detailg">
                <div class="paramsdetail2">深空灰</div>
            </div>

            <div class="chooseDetail"><div>红米Note7{{detailChoose==1?"6GB+64GB全网通":"4GB+64GB移动4G"}}深灰色</div><div>999元</div></div>
            <div class="nameorage">总计：{{ totalPrice }}</div>
            <div class="addShop">加入购物车</div>
        </div>
    </div>
    
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
        detailChoose:1,
        totalPrice:999,
        swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    console.log("this is current swiper instance object", this.swiper);
  }
};
</script>

<style>
    .product{
        font-weight: bold;
    }
    .productParam{
        display: flex;
        justify-content: space-between;
        padding: 10px 2px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid black;
    }
    .params{
        width: 100%;
        display: flex;
    }
    .recommendPage .swiper-container{
        position: relative;
        width: 500px;
        height: 500px;
        background: pink;
    }  
    .recommendPage .swiper-container .swiper-slide{
        width: 500px;
        line-height: 500px;
        background: yellowgreen;
        color: #000;
        font-size: 16px;
        text-align: center;
    }
    .recommendPage .swiper-container .swiper-slide img{
        width: 500px
    }
    .name{
        font-size: 18px;
        font-weight: bold;
    }
    .self-owned{
        margin: 10px 0 0;
    }
    .throughorange{
        padding-bottom: 10px;
        border-bottom: 1px solid #999;
        margin: 0 0 10px;
    }
    .address{
        background: #fafafa;
        padding: 10px 20px;
        border: 1px solid #999;
        margin-bottom: 10px;
    }
    .detailg{
        margin-top: 10px;
        display:flex;
        justify-content: space-between;
    }
    .paramsdetail,.paramsdetail1{
        padding: 10px 0;
        border: 1px solid #999;
        width:  200px;
        text-align: center;
        margin-bottom: 10px;
    }
    .paramsdetail2{
        padding: 10px 0;
        border: 1px solid orangered;
        width:  200px;
        text-align: center;
        color: orange;
        margin-bottom: 10px;
    }
    .chooseDetail{
        display: flex;
        justify-content: space-between;
        margin-bottom: 100px;
    }
    .nameorage{
        font-size: 16px;
        font-weight: bold;
        color: orangered;
    }
    .addShop{
        background: orangered;
        color: white;
        width: 200px;
        line-height: 40px;
        height: 40px;
        text-align: center;
        margin-top: 10px;
    }
    .through{
        text-decoration: line-through;
    }
</style>